﻿<template>
  <div class="home">
    <!-- <h1>这是home页 </h1> -->
    <home-header :city="city"></home-header>
    <home-swiper :list="swiperList"></home-swiper>
    <home-icons :list="iconList"></home-icons>
    <home-selected :list="selectedList"></home-selected>
    <home-recommend :list="recommendList"></home-recommend>
  </div>
</template>

<script>
import axios from 'axios'
import HomeHeader from './components/HomeHeader'
import HomeSwiper from './components/HomeSwiper'
import HomeIcons from './components/HomeIcons'
import HomeRecommend from './components/HomeRecommend'
import HomeSelected from './components/HomeSelected'

export default {
  name: 'Home',
  data(){
    return{
      city:'',
      swiperList:[],
      iconList:[],
      recommendList:[],
      selectedList:[]
    }
  },
  components:{
    HomeHeader,
    HomeSwiper,
    HomeIcons,
    HomeRecommend,
    HomeSelected,
  },
  mounted(){
    this.getHomeInfo()
  },
  methods:{
    getHomeInfo(){
        // axios返回的结果是一个promise对象
        axios.get('/travel/index.php').then(
        // 注意：这里绝对不可以写成this.getHomeInfoSucc（），否则请求的结果会是undefined
        this.getHomeInfoSucc
      )
    },
    getHomeInfoSucc(res){
        // console.log(res)
        res = res.data 
        // console.log(res)
        if(res.ret && res.data){
          this.city = res.data.city
          this.swiperList = res.data.swiperList
          console.log(this.swiperList)
          this.iconList = res.data.iconList
          this.recommendList = res.data.recommendList
          this.selectedList = res.data.selectedList
        }
    }
  }
}
</script>

<style lang="stylus" scoped>
h1 
  text-align center
.home 
  background-color #e5ecf1
.home 
  background-color #e5ecf1
</style>